import { useState, useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
// 导入bootstrap 里icons 图标库
import { ArrowRightCircle } from 'react-bootstrap-icons';
// 导入头部图标的 svg
import headerImg from "../assets/img/header-img.svg";
// 导入animate.css 和跟踪可见性
import 'animate.css'
import TrackVisibility  from "react-on-screen";



export const Banner = () => {
    // 指示当前是哪个单词的索引显示在屏幕上，默认在第一个Web 开发者
    const [loopNum,setLoopNum] = useState(0);
    // 主导真假
    const [isDeleting,setIsDeleting] = useState(false);
    // 显示什么文本
    const [text,setText] = useState('');
     // 设置文本每一个字母更新之间的间隔
    const [delta,setDelta] = useState(300- Math.random()*100);
    // 
    const [index ,setIndex] = useState(1);
    // 设置旋转
    const toRotate = ["Web 开发者","Web 设计师","UI/UX 设计师"];
    // 恒定周期
    const period = 2000;

    useEffect(() => {
        // 设置文本更新之间的间隔
        const ticker = setInterval(() => {
            tick()
        },delta);
        // 销毁定时器
        return () => { clearInterval(ticker)};
        // 在每次文本更新时运行
    },[text])

   

    const tick = () => {
        let i = loopNum % toRotate.length;
        // console.log(i); 0
        let fullText = toRotate[i];
        // console.log(fullText); Web 开发者
        let updatedText = isDeleting ? fullText.substring(0, text.length - 1) : fullText.substring(0, text.length + 1);
        // console.log(updatedText); W， We， Web， Web 开 。。。
        // hook 更新text
        setText(updatedText);

        // 提升速度
        if (isDeleting) {
            setDelta(prevDelta => prevDelta / 2);
        }
        // 检查是否完整输入单词
        if(!isDeleting && updatedText === fullText) {
            setIsDeleting(true);
            setIndex(prevIndex => prevIndex - 1);
            // 将delta 设置为正常状态 2000
            setDelta(period)
        } else if (isDeleting && updatedText === '') {
            // 为空时 false
            setIsDeleting(false);
            // 并且移动到下一个文本
            setLoopNum(loopNum + 1);
            setIndex(1);
            // 给一个500的更新间隔
            setDelta(500);
            
        } else {
            setIndex(prevIndex => prevIndex + 1);
        }
    }

    return (
        <section className="banner" id="home">
            <Container>
                <Row className="align-items-center">
                    {/* xs代表<576px的时候占12格  md>=768px的时候为6格 xl>1200px的时候占7格 */}
                    <Col xs={12} md={6} xl={7}>
                        {/* 可见性组件 规范 */}
                       <TrackVisibility>
                       {/* 设置可见变量 */}
                       {({isVisible}) => 
                       // 动画效果 animate__animated animate__fadeIn
                       <div className={isVisible ? "animate__animated animate__fadeInRight animate__slow animate__repeat-1" : ""}>
                         <span className="tagline">Welcome to our Portfolio<br />欢迎来到我们的作品集</span>
                       
                       {/* 动态打字 */}
                       <h1>{`Hi! I'm Danzel `}
                       <span className="txt-rotate"  data-rotate='["Web 开发者"], ["Web 设计师"],["UI/UX 设计师"]'><br /><span  className="warp">{text}</span></span>
                       </h1>
                       <p>
                       About us,we are a group that loves learning and is positive.Successful or failing,we should always feel hopeful about the future.<br />关于我们，我们是一个热爱学习、积极向上的群体。无论成功与否，我们都应该<br/>对未来充满希望。
                       </p>
                       <button onClick={() => console.log('连接')}>Let's Connect <ArrowRightCircle size={25} /></button>
                        </div>}
                       </TrackVisibility>
                    </Col>
                    {/* 这里要和上面相加等于24 */}
                    <Col xs={12} md={6} xl={5}>
                    <img src={headerImg} alt="Header Img"/>

                    </Col>
                </Row>
            </Container>
        </section>
    )
}